<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>小空调</title>
        <style>
            @font-face {
                font-family: 'led regular';
                src: url('./font/ds_digital/DS-DIGI.TTF');
            }
            * {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }
            body {
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: rgb(241, 241, 241);
            }
            .container {
                position: relative;
                width: 400px;
                height: 500px;
                /*  border: 1px solid rgb(201, 201, 201); */
            }
            .air {
                position: relative;
                margin: 0 auto;
                width: 300px;
                height: 120px;
                background-color: rgb(255, 255, 255);
                border-radius: 10px 10px 0 0;
                filter: drop-shadow(0 2px 4px rgb(145, 145, 145));
            }
            .air::after {
                content: '';
                position: absolute;
                bottom: -21px;
                left: 0;
                height: 20px;
                width: 300px;
                background-color: rgb(255, 255, 255);
                border-radius: 0 0 20px 20px;
            }
            .picture {
                position: absolute;
                top: 10px;
                left: 10px;
                width: 40px;
                height: 65px;
                border-radius: 5px;
            }
            .pattern {
                position: absolute;
                top: 25px;
                right: 35px;
                width: 20px;
                height: 20px;
                opacity: 0;
                transition: all 0.3s;
            }
            .font {
                /* 引用LED字体 */
                font-family: 'led regular';
                position: absolute;
                right: 30px;
                top: 45px;
                width: 50px;
                height: 30px;
                line-height: 30px;
                font-size: 25px;
                color: rgb(184, 184, 184);
                opacity: 0;
                transition: all 0.3s;
            }
            .logo {
                position: absolute;
                left: 50%;
                bottom: 3px;
                transform: translateX(-50%);
                font-size: 10px;
                color: rgb(139, 139, 139);
            }
            .dot {
                position: absolute;
                bottom: -8px;
                right: 12px;
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background-color: rgb(19, 221, 53);
                z-index: 1;
                opacity: 0;
                transition: all 0.3s;
            }
            .wind {
                position: relative;
                top: 30px;
                width: 250px;
                height: 60px;
                margin: 0 auto;
                opacity: 0;
                transition: all 1.2s;
                animation: move 1.5s ease-in-out infinite;
            }
            @keyframes move {
                0%,
                100% {
                    transform: translateY(0px);
                }
                50% {
                    transform: translateY(5px);
                }
            }
            .wind > span {
                position: absolute;
                width: 5px;
                height: 40px;
                background-color: rgb(206, 206, 206);
            }
            .wind1 {
                left: 20%;
                transform: rotate(20deg);
            }
            .wind2 {
                left: 50%;
            }
            .wind3 {
                left: 80%;
                transform: rotate(-20deg);
            }
            .btn {
                position: relative;
                top: 50px;
                margin: 0 auto;
                width: 100px;
                height: 150px;
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
                align-items: center;
            }
            .btn > div {
                width: 35px;
                height: 35px;
                border-radius: 50%;
                font-size: 12px;
                line-height: 35px;
                text-align: center;
                background-color: rgb(204, 204, 204);
                box-shadow: 0 2px 4px rgb(151, 151, 151);
                cursor: pointer;
                user-select: none;
            }
            .btn > div:active {
                background-color: rgb(240, 240, 240);
            }
            .sun,
            .snow,
            .open {
                background-size: 50% 50%;
                background-position: 50% 50%;
                background-repeat: no-repeat;
            }
            .btn .sun {
                background-image: url(./sun.png);
                background-color: rgb(255, 130, 13);
            }
            .btn .snow {
                background-image: url(./snow.png);
                background-color: rgb(13, 138, 255);
            }
            .btn .open {
                background-image: url(./open.png);
                background-color: rgb(33, 255, 13);
            }
        </style>
    </head>
    <body>
        <!-- 底层盒子 -->
        <div class="container">
            <!-- 空调整体 -->
            <div class="air">
                <!-- 显示空调参数的图片 -->
                <img src="1.png" alt="x" class="picture" />
                <!-- 显示模式的图片，默认为雪花 -->
                <img class="pattern" src="snow.png" alt="x" />
                <!-- 显示温度 -->
                <span class="font">17°C</span>
                <!-- logo，直接放个特殊字符，就不引字体图标了 -->
                <span class="logo">☁</span>
                <!-- 空调右下角的小绿点 -->
                <span class="dot"></span>
            </div>
            <!-- 显示风的效果，里面为3条风 -->
            <div class="wind">
                <span class="wind1"></span>
                <span class="wind2"></span>
                <span class="wind3"></span>
            </div>
            <!-- 装按钮的盒子 -->
            <div class="btn">
                <!-- 上 -->
                <div class="up">▲</div>
                <!-- 下 -->
                <div class="down">▼</div>
                <!-- 太阳 -->
                <div class="sun"></div>
                <!-- 雪花 -->
                <div class="snow"></div>
                <!-- 开关 -->
                <div class="open"></div>
            </div>
        </div>
        <!-- 空调运行时的音乐 -->
        <audio src="./audio/ac-work.mp3" class="music" loop></audio>
        <!-- 点击按钮时“叮”一声响的音乐 -->
        <audio src="./audio/di.mp3" class="ding"></audio>

        <script>
            /* 开关 */
            var open = document.querySelector('.open');
            /* 太阳按钮 */
            var sun = document.querySelector('.sun');
            /* 雪花按钮 */
            var snow = document.querySelector('.snow');
            /* 上按钮 */
            var up = document.querySelector('.up');
            /* 下按钮 */
            var down = document.querySelector('.down');
            /* 模式图片 */
            var pattern = document.querySelector('.pattern');
            /* 温度 */
            var font = document.querySelector('.font');
            /* 小绿点 */
            var dot = document.querySelector('.dot');
            /* 风 */
            var wind = document.querySelector('.wind');
            /* 空调运行时的音乐 */
            var music = document.querySelector('.music');
            /* 点击按钮时“叮”一声响的音乐*/
            var ding = document.querySelector('.ding');
            /* 变量，判断开关状态 */
            var temp = 1;
            /* 温度大小 */
            var num = 17;

            open.addEventListener('click', function () {
                if (temp == 0) {
                    open.style.backgroundColor = 'rgb(33, 255, 13)';
                    pattern.style.opacity = 0;
                    font.style.opacity = 0;
                    dot.style.opacity = 0;
                    wind.style.opacity = 0;
                    temp = 1;
                    music.pause();
                } else if (temp == 1) {
                    open.style.backgroundColor = 'red';
                    pattern.style.opacity = 1;
                    font.style.opacity = 1;
                    dot.style.opacity = 1;
                    wind.style.opacity = 1;
                    temp = 0;
                    music.play();
                }
            });
            up.addEventListener('click', function () {
                if (num == 30) return;
                num++;
                font.innerHTML = num + '°C';
                ding.load();
                ding.play();
            });
            down.addEventListener('click', function () {
                if (num == 16) return;
                num--;
                font.innerHTML = num + '°C';
                ding.load();
                ding.play();
            });
            sun.addEventListener('click', function () {
                pattern.src = './sun.png';
                ding.play();
                music.load();
                music.play();
            });
            snow.addEventListener('click', function () {
                pattern.src = './snow.png';
                ding.play();
                music.load();
                music.play();
            });
        </script>
    </body>
</html>
